<!-- 节点数据 -->
<template>
  <div class="pag" >
    <div class="banner">
      <h3>{{ new Date() | toDate }}数据信息</h3>
    </div>
    <div class="data-table">
      <div class="t-head">
        <div></div>
        <div>路由器</div>
        <div>客户端</div>
        <div>Linux</div>
        <div>总计</div>
      </div>
      <div class="t-row" style="color:#00A989;">
        <div>今日新增<br>节点</div>
        <div>{{ router.node | numAddSepFixed }}</div>
        <div>{{ pc.node | numAddSepFixed }}</div>
        <div>{{ linux.node | numAddSepFixed }}</div>
        <div>{{ router.node + pc.node + linux.node | numAddSepFixed }}</div>
      </div>
      <div class="t-row" style="color:#202C5B;">
        <div>全网节点<br>总计</div>
        <div>{{ router.nodeTotal | numAddSepFixed  }}</div>
        <div>{{ pc.nodeTotal | numAddSepFixed }}</div>
        <div>{{ linux.nodeTotal | numAddSepFixed }}</div>
        <div>{{ router.nodeTotal + pc.nodeTotal + linux.nodeTotal | numAddSepFixed }}</div>
      </div>
      <div class="t-row" style="color:#DC0630;">
        <div>昨日发放<br>CVNT</div>
        <div>{{  router.cvnt | numAddSepFixed  }}</div>
        <div>{{ pc.cvnt | numAddSepFixed }}</div>
        <div>{{ linux.cvnt | numAddSepFixed }}</div>
        <div>{{ yesTotal | numAddSepFixed }}</div>
      </div>
      <div class="t-row" style="color:#DC0630;">
        <div>总计发放<br>CVNT</div>
        <div>{{  router.cvntTotal | numAddSepFixed }}</div>
        <div>{{ pc.cvntTotal | numAddSepFixed }}</div>
        <div>{{ linux.cvntTotal | numAddSepFixed }}</div>
        <div>{{ router.cvntTotal + pc.cvntTotal + linux.cvntTotal | numAddSepFixed }}</div>
      </div>
    </div>
    <div class="data1" style="background: #0083FF;">
      <label>矿池余额</label>
      <div>
        <div v-show="!updateStatus">{{ cvnt | numAddSepFixed}}</div>
        <input type="number" v-model="cvntValue" v-show="updateStatus" ref="cvntInput">
        <div class="btn" @click="setUpdateStatus" v-show="!updateStatus">修改</div>
        <div class="btn" @click="updateHandle" v-show="updateStatus">确定</div>
      </div>
    </div>
    <div class="data1" style="background: #7848FF">
      <label>预计发放天数<span>（矿池余额/昨日发放总计）</span></label>
      <div>
        <div>{{ surplusDay }}<span>天</span></div>
      </div>
    </div>
  </div>

</template>

<script>
    import {getViewNode, updateCvntTotal } from 'api/index'
    import {versions} from 'common/js/utl'

    export default {
        data() {
            return {
                cvntValue: 0,
                updateTxt: ['修改', '确定'],
                updateStatus: false,
                "cvnt":0,
                "router": {
                    "node": 0,
                    "nodeTotal": 0,
                    "cvnt": 0,
                    "cvntTotal": 0
                },
                "pc": {
                    "node": 0,
                    "nodeTotal": 0,
                    "cvnt": 0,
                    "cvntTotal": 0
                },
                "linux": {
                    "node": 0,
                    "nodeTotal": 0,
                    "cvnt": 0,
                    "cvntTotal": 0
                }
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                vm.getData()
            })
        },
        mounted(){
            if(versions.android){
                window.addEventListener("resize", function() {
                    if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
                        window.setTimeout(function() {
                            document.activeElement.scrollIntoViewIfNeeded();
                        },0);
                    }
                })
            }
        },
        computed: {
          yesTotal(){
              let {router, pc, linux} = this
              return router.cvnt + pc.cvnt + linux.cvnt
          },
          surplusDay(){
              let {cvnt, yesTotal} = this
              let day
              if(yesTotal != 0){
                  day = Math.floor(cvnt/yesTotal)
              }else{
                  day = 0
              }
              return day
          }
        },
        methods: {
            async getData() {
                let {data} = await getViewNode({
                    t: Date.now()
                })
                Object.assign(this, data)
            },
            setUpdateStatus(){
                this.updateStatus=!this.updateStatus
                this.cvntValue = this.cvnt
                this.$nextTick(()=>{
                    this.$refs.cvntInput.focus()
                })
            },
            async updateHandle(){
                let {cvntValue} = this
              if(cvntValue < 1){
                  return
              }

              try {
                  let data = await updateCvntTotal({
                      cvnt: cvntValue
                  })
                  this.cvnt = cvntValue
                  this.updateStatus=!this.updateStatus
              }catch (e) {
                  this.$warn(e.info || '修改失败')
              }


            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {

  }

  .banner {
    //width:750px;
    height:310px;
    background:linear-gradient(210deg,rgba(10,29,87,1),rgba(24,63,143,1));
    h3 {
      padding: 50px 0 0 29px;
      font-size:42px;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }

  .data-table {
    width:690px;
    height:422px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -170px auto 24px auto;
    > div {
      border-bottom: 2px solid #F5F5F5;
      text-align: center;
      display: flex;
      line-height: 30px;
      &:last-of-type {
        border-bottom: none;
      }
      > div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
      }
    }
  }

  .t-head {
    height: 58px;
    color: #71768C;
    font-size: 24px;
    > div {
      border-right: 2px solid #F5F5F5;
      &:last-of-type {
        border: none;
      }
    }
  }

  .t-row {
    height: 90px;
    &:nth-of-type(3) {
      border-bottom: 8px solid #F5F5F5;
    }
    > div {
      border-right: 2px solid #F5F5F5;
      font-size:26px;
      font-weight:600;
      word-break: break-all;
      &:first-of-type {
        color: #71768C;
        font-size: 24px;
      }
      &:last-of-type {
        border: none;
      }
    }
  }

  .data1 {
    width:690px;
    height:140px;
    border-radius:10px;
    margin: 0 30px 24px 30px;
    color: #fff;
    font-size:30px;
    font-weight:600;
    padding: 24px 24px 17px 24px;
    label{
      display: block;
      margin-bottom: 19px;
      span {
        font-weight: 400;
      }
    }
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 42px;
      height: 50px;
      input {
        background: transparent;
        color: inherit;
        border: 1px solid #fff;
        //border: none;
        /*outline: none;*/
        height: 50px;
        width: 350px;
        border-radius: 8px;
      }
      span {
        font-size: 22px;
      }
    }
  }

  .btn {
    width:100px;
    height:44px;
    border:2px solid rgba(255,255,255,1);
    border-radius:6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    line-height: normal;
  }




</style>
















